<%--
  Created by IntelliJ IDEA.
  User: 星星在唱歌
  Date: 2022/2/17
  Time: 18:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册用户信息</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
    <script>
        var isflag = false;
    </script>
    <%--<script>
        function $(id) {
            return document.getElementById(id);
        }
        function check() {
            var ouserName = $("userName");
            var ouserPwd = $("userPwd");
            var oreUserPwd = $("reUserPwd");
            var osel = $("sel");
            var oaddress = $("address");
            if(ouserName.value == ''){
                alert("用户名不能为空！");
                return false;
            }
            if (ouserPwd.value == ''){
                alert("请输入密码!");
                return false;
            }else {
                if(oreUserPwd.value != ouserPwd.value){
                    alert("两次密码不一样");
                    return false;
                }
            }
            if(osel.value == ''){
                alert("请选择学历！");
                return false;
            }
            if (oaddress.value == ''){
                alert("请输入家庭住址！");
                return false;
            }
            return true;
        }
    </script>--%>
</head>
<body>
<div >
    <form action="${pageContext.request.contextPath}/main?cmd=register" method="post" onsubmit="return check()">
        <table border="1" cellspacing="0" cellpadding="8" style="margin: 0 auto">
            <tr>
                <th colspan="2" scope="col">用户信息注册</th>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input name="userName" type="text" id="userName" />
                    <span id="sp"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input name="userPwd" type="password" id="userPwd" /></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input name="reUserPwd" type="password" id="reUserPwd" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" value="男" checked/> 男 <input
                        type="radio" name="sex" value="女" /> 女</td>
            </tr>
            <tr>
                <td>爱好</td>
                <td><input name="chk" type="checkbox" id="chk" value="书法" />
                    书法 <input name="chk" type="checkbox" id="chk" value="舞蹈" /> 舞蹈 <input
                            name="chk" type="checkbox" id="chk" value="音乐" /> 音乐 <input
                            name="chk" type="checkbox" id="chk" value="绘画" /> 绘画 <input
                            name="chk" type="checkbox" id="chk" value="游泳" /> 游泳</td>
            </tr>
            <tr>
                <td>学历</td>
                <td><select name="sel" id="sel">
                    <option value="">====请选择====</option>
                    <c:forEach items="${educationList}" var="education">
                        <option value="${education.eid}" <c:if test="${userDemo.id == education.eid}">selected</c:if>>${education.ename}</option>
                    </c:forEach>
                </select></td>
            </tr>
            <tr>
                <td>家庭住址</td>
                <td><textarea name="address" cols="50" rows="10" id="address"></textarea></td>
            </tr>
            <tr>
                <td>生日</td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="submit" name="Submit" value="提交信息" /> <input
                        type="reset" name="Submit2" value="重置" /></td>
            </tr>
        </table>
    </form>
</div>
<script>
    //入口函数
    $(function (){
        console.log('5555')
        //获取文本框对象，给文本绑定事件
        $("#userName").blur(function (){
            var $userName = $("#userName").val();
            //发送异步请求，把用户名发送到后端，进行验证
            /**
             * url : 表示异步请求请求到的后端的地址
             * async: 表示当前请求是异步（false）或者是同步（true）
             * dataType: 表示后端响应的数据的格式：json, text
             * data: 前端准备发送到后端的数据
             * type: 表示当请求的方式：get / post
             * success: 表示响应成功之后执行的回调函数
             * 回调函数 : 接收后端响应的数据
             * function(data): 响应回来的数据
             * error: 表示请求失败的响应
             *
             * {"name":"value"}
             */
            $.ajax({
                url:"${pageContext.request.contextPath}/main?cmd=existsUserName",
                async:false,
                dataType:"json",
                data:{"userName":$userName},
                type:"get",
                success:function (data){
                    console.log('data',data);
                    if(data.msg == "ok"){
                        $("#sp").html("该用户名可用");
                        $("#sp").css("color","green");
                        isflag = true;
                    }else if(data.msg == "no"){
                        $("#sp").html("该用户名已被使用");
                        $("#sp").css("color","red");
                        isflag = false;
                    }
                },
                error:function (data){
                    $("#sp").html("数据加载失败!");
                    $("#sp").css("color","red");
                }
            });
        })
    })

    function check(){
        if (!isflag){
            alert("该用户名不可用!")
            return false;
        }
        return true;
    }
</script>
</body>
</html>
